<template>
  <!-- 包住所有的内容就是根标签 -->
  <van-action-sheet v-model="show" title="频道管理">
    <!-- 我的频道 -->
    <div class="channel-box">
      <div class="title">
        <span>我的频道</span>
        <van-button @click="isEdit = !isEdit" plain type="danger" size="mini">{{ isEdit ? '取消' : '编辑' }}</van-button>
      </div>
      <van-grid>
        <van-grid-item v-for="(item, index) in ownList" :key="item.id">
          <!-- 我的频道每一项 -->
          <span @click="into(index)" :class="{ active: index === value }">{{
            item.name
          }}</span>
          <van-icon @click="$emit('del', { id: item.id, index })" v-show="index !== 0 && isEdit" class="del-icon" name="cross" />
        </van-grid-item>
      </van-grid>
    </div>
    <!-- 可选频道 -->
    <div class="channel-box">
      <div class="title">
        <span>可选频道</span>
      </div>

      <van-grid>
        <van-grid-item
          v-for="item in optList"
          :key="item.id"
          :text="item.name"
          @click="$emit('add', item)"
        />
      </van-grid>
    </div>
  </van-action-sheet>
</template>

<script>
export default {
  props: {
    ownList: {
      type: Array,
      required: true
    },
    allList: {
      type: Array,
      required: true
    },
    // 故意叫value，埋伏笔
    value: {
      type: Number,
      required: true
    }
  },
  data () {
    return {
      show: false,
      isEdit: false
    }
  },
  methods: {
    into (index) {
      // 1. 传递给父
      this.$emit('input', index)
      // 2. 隐藏sheet
      this.show = false
    }
  },
  // model: {
  //   prop: 'zz',
  //   // 意思是把外界v-model的@input变成了@xx
  //   event: 'xx'
  // },
  computed: {
    // 可选频道
    // optList () {
    //   // 从所有频道里筛选出不在我的频道里的频道
    //   const list = this.allList.filter(v => {
    //     // v就是所有频道里的每一项，判断它在不在我的频道里
    //     const res = this.ownList.find(v2 => v2.id === v.id)
    //     if (!res) {
    //       return true
    //     } else {
    //       return false
    //     }
    //   })

    //   return list
    // }
    optList () {
      // 从所有频道里筛选出不在我的频道里的频道
      return this.allList.filter(v => !this.ownList.find(v2 => v2.id === v.id))
    }
  }
}
</script>

<style lang="less" scoped>
.channel-box {
  padding: 0 20px;
  .title {
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .del-icon {
    position: absolute;
    right:5px;
    top: 15px;
  }

  .active {
    color: red;
  }
}
</style>
